/**
 * The ButtonMenu user-interface component and tag conversor class
 * @class syslib.ui.ButtonMenu
 * @author Gabriel Ricci
 */
syslib.ui.ButtonMenu = __class(syslib.ui.VisualTag, 
/**
 * @lends syslib.ui.ButtonMenu
 */
{
	// class attributes
	id : "",
	title : "",  
	childrenContainerId : "",
	children : [], 
	selectedContainer : null,
	switcherContainer : null, 
	childrenContainer : null, 
	width : 250, 
	maxHeight : 400, 
	
	direction : "right", 
	
	actionPerformed : false, 
		
	prepare : function(element){
		// clear the attributes
		this.id 	= "";
		this.title	= "";
		this.childrenContainerId = "";
		this.children = [];
		this.selectedContainer = null;
		this.switcherContainer = null;  
		this.childrenContainer = null;
		this.width		= 250;
		this.maxHeight 	= 500;
		this.direction 	= "right";
		this.actionPerformed = false;
		  
		// load the style
		syslib.loadStyleForComponent("buttonmenu");

		// set some important information
		this.id = (__valid(this.__attributes.id)) ? this.__attributes.id : "buttonmenu_" + Math.floor(Math.random() * 101);
		this.title = (__valid(this.__attributes.title)) ? this.__attributes.title : "Untitled Button Menu";
		this.direction = (__valid(this.__attributes.direction)) ? this.__attributes.direction : "right";
		this.width = (__valid(this.__attributes.width)) ? parseInt(this.__attributes.width) : 250;
		this.maxHeight = (__valid(this.__attributes.maxheight)) ? parseInt(this.__attributes.maxheight) : 400;
		
		this.childrenContainerId = this.id + "_buttons_container";
		
		// return
		return true;
	},

	execute : function(){
		// create the attributes of the main objectcount
		var attributes = syslib.object.extend(this.__attributes, {
			"class" : "buttonmenu-container-normal"
		});

		// create the json structure
		elemtJSON = ["span", attributes,
		 				["span", {"innerName" : "selectedContainer", "class" : "buttonmenu-selected-container"}, 
		 					this.title
		 				],
		 				["span", {"innerName" : "switcherContainer", "class" : "buttonmenu-switcher-container"}, 
							["span", {"innerName" : "switcher", "class" : "buttonmenu-switcher-normal"},
								"&nbsp;" 
							]				
		 				],
						["div", {"innerName" : "childrenContainer", "id" : this.childrenContainerId}, 
							this.__innerHTML
						]
					];

		// create the element
		var buttonMenu = this.createDOM(elemtJSON);

		// set some important stuff
		this.selectedContainer = this.__refs.selectedContainer;
		this.switcherContainer = this.__refs.switcherContainer;
		this.childrenContainer = this.__refs.childrenContainer;
		
		// set the class of the children container
		if(this.direction === "left"){
			this.childrenContainer.className = "buttonmenu-children-container-right";
			
		} else {
			this.childrenContainer.className = "buttonmenu-children-container-left";
		}
		
		// set the styles of the children container
		this.childrenContainer.style.width = this.width + "px";
		this.childrenContainer.style.maxHeight = this.maxHeight + "px";
		
		// return
		return buttonMenu;
	},

	finalize : function(){
		// hide the children container
		syslib.element.hide(this.childrenContainer);
	
		// create the events
		syslib.event.listen("mouseover", this.__element, function(){
			this.__element.className 		= "buttonmenu-container-over";
			this.__refs.switcher.className 	= "buttonmenu-switcher-over"
		}.applyTo(this));
		
		syslib.event.listen("mouseout", this.__element, function(){
			this.__element.className 		= "buttonmenu-container-normal";
			this.__refs.switcher.className 	= "buttonmenu-switcher-normal"
		}.applyTo(this));
		
		syslib.event.listen("mousedown", this.__element, function(){
			this.__element.className = "buttonmenu-container-clicked";
		}.applyTo(this));
		syslib.event.listen("mouseup", this.__element, function(){ 
			this.__element.className = "buttonmenu-container-over";
		}.applyTo(this));
		
		syslib.event.listen("click", this.__element, function(){
			this.toggleButtons();
		}.applyTo(this));
		
		syslib.event.listen("click", document.body, function(){
			setTimeout(function(){
				if(this.actionPerformed != true){
					if(syslib.element.isVisible(this.childrenContainer)){
						this.toggleButtons();	
					}
				}
				this.actionPerformed = false;
			}.applyTo(this), 100);
		}.applyTo(this));
	}, 
	
	toggleButtons : function(){
		// toggle the visibility
		syslib.element.toggleVisibility(this.childrenContainer);
		
		// set the actionPerformed state variable
		this.actionPerformed = true;
	}, 
	
	addChild : function(buttonItem){
		if(typeof buttonItem === 'object'){
			try{
				// get the children count
				var count = this.children.length;
			
				// store the child
				this.children[count] = buttonItem;

				// if no itens are selected and there's no title for the button menu, select this item
				if(count == 0){
					if(!__valid(this.title) && this.title === ""){
						this.selectChild(count);
					}
				}
				
				// return
				return count;
			} catch(e){
				// show the error
				syslib.messages.error("syslib.ui.ButtonMenu.addChild(): Couldn't add a new buttom item as a child of this menu: " + e.message);
				return false;
			}
		} else {
			// show the error
			syslib.messages.error("syslib.ui.ButtonMenu.addChild(): Couldn't add a new buttom item as a child of this menu: invalid buttom item parameter!");
		}
	},

	selectChild : function(count){
		// search the childs
		for(var i in this.children){
		   	// prevent ie errors
		   	
			if(isNaN(i)){continue;}
			
			// get the data
			var buttonItem = this.children[i];
			
			// check if the count equals the iterator
			if(i == count){
				// update the container definition
				// if(__valid(buttonItem.title)){
				//	this.selectedContainer.innerHTML = buttonItem.title;
				//}
				
				// update the buttonitem classes
				buttonItem.__select();
			} else {
				// update the buttonitem classes
				buttonItem.__unselect();
			}
		}
	}
});